<template>
	<div>
		<el-row>
      <div align="left">
      	<el-button type="primary" @click="query">添加商品</el-button>
      </div>
			<!-- 添加商品模态框· -->
			<el-dialog title="添加商品" :visible.sync="dialogFormVisible">
				<el-form :model="form">
					<el-form-item label="商品名:">
						<el-input v-model="form.shopname" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="商品价格">
						<el-input v-model="form.shopprice" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="商品分类">
						<el-select v-model="shoptypedata.shoptypename" placeholder="请选择商品类型">
							<el-option v-model="shoptypedata.shoptypename" v-for="shoptypedata in shoptypedata" :key="shoptypedata.shoptypeid">{{shoptypedata.shoptypename}}</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="商品图">
						<el-upload class="upload-demo" action="http://localhost/shop/upload" :on-preview="handlePreview"
						 :on-remove="handleRemove"  multiple :limit="3" :on-success="onsuccess">
							<el-button size="small" type="primary">点击上传</el-button>
						</el-upload>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="addto">确 定</el-button>
				</div>
			</el-dialog>
			<!-- 修改商品模态框· -->
			<el-dialog title="修改商品" :visible.sync="dialogFormVisibleq">
				<el-form :model="form1">
					<el-form-item label="商品名:">
						<el-input v-model="form1.shopname" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="商品价格">
						<el-input v-model="form1.shopprice" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="商品分类">
						<el-select v-model="shoptypedata.shoptypename" placeholder="请选择商品类型">
							<el-option v-model="shoptypedata.shoptypename" v-for="shoptypedata in shoptypedata" :key="shoptypedata.shoptypeid">{{shoptypedata.shoptypename}}</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="商品图">
						<el-input type="file" v-model="form1.shopimage" autocomplete="off" />
						</el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisibleq = false">取 消</el-button>
					<el-button type="primary" @click="updatas();open1()">确 定</el-button>
				</div>
			</el-dialog>
			<!-- 商品展示 -->
      <!-- 添加商品按钮~ -->
   
			<el-table :data="shopdata" style="width: 100%; font-size: 20px; " max-height="500">
				//空出一行
				<el-table-column prop="" label="" width="40">
				</el-table-column>
				<el-table-column prop="shopid" label="编号" width="200">
				</el-table-column>
				<el-table-column prop="shopname" label="商品名" width="200">
				</el-table-column>
				<!-- 商品图片！！ -->
				<el-table-column align="center" label="商品图">
					<template slot-scope="scope">
						<div v-if="scope.row.shopimage == null || scope.row.shopimage == ''">
							<!-- < img src="scope.row.shopimage" /> -->

							<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.huabanimg.com%2Fd0177ac963cf300840cfcb46f31bb4ad33bb7ae8261d2-v8JsRL_fw658&refer=http%3A%2F%2Fhbimg.huabanimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650596050&t=71244c0b008876e429df04189805fe0e"
							 style="width: 80px; height: 80px;">
						</div>
						<div v-else>
							<img :src="scope.row.shopimage" style="width: 80px; height: 80px;">
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="shopprice" label="价格" width="200">
				</el-table-column>
				<el-table-column prop="shoptypeid" label="类别" width="200">
				</el-table-column>
				<el-table-column prop="shopnum" label="数量" width="200">
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="200">
					<template slot-scope="scope">
						<el-button type="primary" icon="el-icon-edit" circle @click="queryq(scope.row.shopid)"></el-button> <!-- //修改 -->
						<el-button type="danger" icon="el-icon-delete" slot="reference" circle :plain="true" plain @click="open4();delet(scope.row.shopid)">
						</el-button> <!-- //删除 -->
					</template>
				</el-table-column>
			</el-table>
		</el-row>

	</div>
</template>

<script>
	var _this;
	export default {
		created() {
			_this = this //记录this--【当前组件对象】
			_this.shopshow();
			//_this.inshopshow();
		},
		data() {
			return {
				visible: false,
				imgurl:"",
				dialogTableVisible: false,
				dialogFormVisible: false,
				dialogTableVisibleq: false,
				dialogFormVisibleq: false,
				form: {
					shopname: '',
					shopprice: '',
					shopimage: '',
					shoptypename: '',
					delivery: false,
					type: []
				},
				form1: {
					shopname: '',
					shopprice: '',
					shopimage: '',
					delivery: false,
					type: []
				},
				shopdata: [],
				shoptypedata: [],
				inshopdata: [],
				zhi: ""

			};
		},
		methods: {
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePreview(file) {
				console.log(file);
			},
			onsuccess(param){
				console.log(param);
				this.imgurl=param
			},
			delet(shopid) {
				_this.$axios.post(
						"/shop/delete", {
							'shopid': shopid
						}
					)
					.then(function(param) {
						console.log(param)
						_this.shopshow();
					})
					.catch(function(err) {
						console.log(err)
					})

			},
			addto() {
				_this.dialogFormVisible = false,
					_this.$axios.post(
						"/shop/add", {
							"shopname": _this.form.shopname,
							"shopimage": _this.imgurl,
							"shopprice": _this.form.shopprice,
							"shoptypeid": _this.shopdata.shoptypeid,
						}
					)
					.then(function(param) {
						console.log(param)
						_this.shopshow()
					})
					.catch(function(err) {
						console.log(err)
					})

			},
			updatas() {
				_this.dialogFormVisibleq = false,

					_this.$axios.post(
						"/shop/updata", {
							"shopid": _this.zhi,
							"shopname": _this.form1.shopname,
							"shopprice": _this.form1.shopprice,
							"shopimage": _this.form1.shopimage,
							"shoptypename": _this.shopdata.shoptypename,
						}
					)
					.then(function(param) {
						console.log("修改：")
						console.log(param)
						_this.shopshow()
					})
					.catch(function(err) {
						console.log(err)
					})

			},
			shopshow() {
				_this.$axios.post(
						"/shop/show")
					.then(function(param) {
						console.log("shuju")
						console.log(param)
						_this.shopdata = param.data

					})
					.catch(function(err) {
						console.log(err)
					})

			},
			open1() {
				this.$notify({
					title: '修改成功提示！',
					message: '您已成功修改数据',
					type: 'success'
				});
			},
			test(inaddtime) {
				alert(inaddtime)
			},
			query() {
				_this.dialogFormVisible = true,
					_this.$axios.post(
						"/shop/list")
					.then(function(param) {
						console.log("shoptype的")
						console.log(param)
						_this.shopdata = param.data.shops
						_this.shoptypedata = param.data.shoptypes
						_this.inshopdata = param.data.inshops
					})
					.catch(function(err) {
						console.log(err)
					})
			},
			queryq(shopid) {
				_this.zhi = shopid,

					_this.dialogFormVisibleq = true,
					_this.$axios.post(
						"/shop/list")
					.then(function(param) {
						console.log("shoptype的")
						console.log(param)
						_this.shopdata = param.data.shops
						_this.shoptypedata = param.data.shoptypes
						_this.inshopdata = param.data.inshops
					})
					.catch(function(err) {
						console.log(err)
					})
			},
			open4() {
				this.$notify.error({
					title: '删除警告！',
					message: '您已删除该数据！'
				});
			},
		}
	}
</script>

<style>
</style>
